<!--设置主页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("setting.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-button type="primary" icon="el-icon-setting" @click="showSetShopDialog">{{$t("setting.shopSetBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row :gutter="20" style="height:60%;width:60%;">
            <el-col :span="8">
                <div @click="showSetStaffMgrPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);cursor: pointer;">
                        {{$t("setting.route.staffMgrMenuName")}}
                    </el-card>
                </div>
            </el-col>
            <el-col :span="8">
                <div @click="showProjectMenuPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);cursor: pointer;">
                        {{$t("setting.route.projectItemMenuName")}}
                    </el-card>
                </div>
            </el-col>
            <el-col :span="8">
                <div @click="showSetLanguagePage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);cursor: pointer;">
                        {{$t("setting.route.languageMenuName")}}
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
    <!--卡号信息详情界面-->
    <setshop ref="setshop"></setshop>
</div>
</template>

<script>
import SetShop from '../../components/setshop.vue';
export default {
    components: {
        setshop: SetShop
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/home'
            });
        },
        showProjectMenuPage() {
            //显示店铺报表页面
            this.$router.push({
                path: '/setting/projectmenu'
            });
        },
        showSetStaffMgrPage() {
            this.$router.push({
                path: '/setting/staffmgr'
            });
        },
        showSetShopDialog() {
            this.$refs.setshop.showShopPage();
        },
        showSetLanguagePage() {
            //显示设置语言页面
            this.$router.push({
                path: '/setting/language'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}
</style>
